<template>
  <div>
    <div class="contains">
      <el-table :data="tableData5" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="店铺名称">
                <span>{{ props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="收货地址">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.category }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="订单 ID" prop="id"></el-table-column>
        <el-table-column label="总价格" prop="price"></el-table-column>
        <el-table-column label="订单状态" prop="state"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang='stylus'>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.button-list
    width 200px
    display flex
    .el-button
      max-width 60px
      height 30px
      padding 5px
      font-size 12px
.contains
   padding 20px
   .el-table
       border 1px solid #dfe6ec
</style>